<template>
  <div class="page">
    <h4>基本信息</h4>
    <Row>
      <i-col span="6">
        <span class="label-span">投保人姓名：</span> <span>{{form.appntName}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">联系电话：</span> <span>{{form.appntMobile}}</span>
      </i-col>
      <i-col span="6">
        <!-- <span class="label-span">年龄：</span> <span>34岁</span> -->
        <span class="label-span">年龄：</span> <span>{{form.appntAge || ''}}岁</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">性别：</span> <span>{{form.appntSex}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">国籍：</span> <span>{{form.appntNativePlace}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">出生日期：</span> <span>{{form.appntBirthday}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">证件类型：</span> <span>{{form.appntIdType}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">证件号码：</span> <span>{{form.appntIDNo}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">邮政编码：</span> <span>{{form.appntZipCode}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">职业名称：</span> <span>{{form.appntOccupationName}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">联系地址：</span> <span>{{form.appntMailAddress}}</span>
      </i-col>
    </Row>
    <h4 style="margin:20px 0">被保人信息</h4>
    <Row>
      <i-col span="6">
        <span class="label-span">被保人姓名：</span> <span>{{form.insuredName}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">联系电话：</span> <span>{{form.insuredMobile}}</span>
      </i-col>
      <i-col span="6">
        <!-- <span class="label-span">年龄：</span> <span>34岁</span> -->
        <span class="label-span">年龄：</span> <span>{{form.insuredAge || ''}}岁</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">性别：</span> <span>{{form.insuredSex}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">国籍：</span> <span>{{form.insuredNativePlace}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">出生日期：</span> <span>{{form.insuredBirthday}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">证件类型：</span> <span>{{form.insuredIdType}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">证件号码：</span> <span>{{form.insuredIDNo}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">投被保人关系：</span> <span>{{form.relaToAppnt}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">邮政编码：</span> <span>{{form.insuredZipCode}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">职业名称：</span> <span>{{form.insuredOccupationName}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">联系地址：</span> <span>{{form.insuredMailAddress}}</span>
      </i-col>
    </Row>
    <h4 style="margin:20px 0">受益人信息</h4>
    <Table :columns="columns" :data="form.bnfInfo" style="margin-top:10px">
      <!-- <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="toDetail(row)">查看详情</span>
      </template> -->
    </Table>
  </div>
</template>

<script>
// import { loadResourcesMixin } from "../../../util/mixins/loadResourcesMixin";
export default {
  name: "policyClientInfo",
  // mixins: [loadResourcesMixin],
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // mixinData: {
      //   // tableAxios: queryAssenmentList,
      // },
      columns: [
        {
          title: "受益顺序",
          key: "bnfNo",
          align: "center",
        },
        {
          title: "姓名",
          key: "bnfName",
          align: "center",
        },
        {
          title: "受益份额",
          key: "bnfRate",
          align: "center",
        },
        {
          title: "与被保人关系",
          key: "bnfRelationToInsured",
          align: "center",
        },
        {
          title: "性别",
          key: "bnfSex",
          align: "center",
        },
        {
          title: "出生日期",
          key: "bnfBirthday",
          align: "center",
        },
        {
          title: "证件类型",
          key: "bnfIDType",
          align: "center",
        },
        {
          title: "证件号码",
          key: "bnfIDNo",
          align: "center",
        },
      ],
    };
  },
};
</script>
<style scoped>
.label-span {
  color: #1d1d1d;
}
.page >>> .ivu-row {
  margin-top: 20px;
}
</style>
